<template>
  <el-button type="primary" size="default" @click="handleAdd">
    新增角色
  </el-button>
  <el-drawer
    v-model="drawer"
    :title="row ? '编辑角色' : '新增角色'"
    direction="rtl"
    :before-close="handleClose"
  >
    <RoleForm
      @add-role="handleTableAdd"
      @edit-role="handleTableEdit"
      :row-data="row"
      :row-idx="roleIdx"
    />
  </el-drawer>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="ID" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.objectId }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="角色名称" width="180">
      <template #default="scope">
        {{ scope.row.roleName }}
      </template>
    </el-table-column>
    <el-table-column label="角色权限" width="180">
      <template #default="scope">
        <img :src="scope.row.checkedKeys" alt="" style="height: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-popconfirm
          title="确定手没抖?"
          @confirm="handleDelete(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { roleGet, roleDel, userGet } from "@/api/user";
import RoleForm from "./components/roleForm.vue";
import { ElMessage } from "element-plus";
export default {
  components: {
    RoleForm,
  },
  data() {
    return {
      tableData: [],
      drawer: true, //先让drawer渲染一次，保证drawer内部roleForm组件watch开启监听
      row: null, //传给roleForm的数据包
      roleIdx: -1, //记录被编辑的数据下标
    };
  },
  created() {
    roleGet().then((res) => {
      console.log(res);
      this.tableData = res.data.results;
    });
  },
  mounted() {
    this.drawer = false;
  },
  methods: {
    handleAdd() {
      this.drawer = true;
      this.row = null;
    },
    handleClose() {
      this.drawer = false;
    },
    handleTableAdd(roleData) {
      this.tableData = [...this.tableData, roleData];
      this.drawer = false;
    },
    async handleDelete(idx, row) {
      console.log(idx, row);
      // 判断当前角色有没有关联相关账号
      let roleUser = await userGet(row.objectId);
      console.log("1查询用户表", roleUser);
      if (roleUser.data.results.length) {
        ElMessage({
          message: "请先删除角色关联的相关账号",
          type: "warning",
        });
        return;
      }
      // 删除数据库
      roleDel(row.objectId).then((res) => {
        this.tableData.splice(idx, 1); //删除本地
      });
    },
    //点击编辑按钮
    handleEdit(idx, row) {
      this.drawer = true;
      this.row = row;
      this.roleIdx = idx;
    },
    //更新表格数据
    handleTableEdit({ idx, editData }) {
      this.tableData[idx] = editData;
    },
  },
};
</script>

<style lang="scss" scoped></style>
